<template>
    <div class="bgColorF" :style="{ height: pcHeight }">
        <!--查询条件-->
        <div class="">
            <el-form
                label-suffix="："
                :inline="true"
                size="small"
                :model="searchForm"
            >
                <el-form-item label="查询">
                    <el-input
                        v-model="searchForm.searchVal"
                        clearable
                        maxlength="50"
                        class="w200"
                        placeholder="请输入查询内容"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitSearch">
                        查询
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--数据列表-->
        <div class="table-margin">
            <el-table
                ref="multipleTable"
                v-loading="dataLoading"
                size="small"
                border
                :data="tableData"
                tooltip-effect="light"
                style="width: 100%"
                :header-cell-style="{ background: '#f6f6f6' }"
                :max-height="pcHeight2"
                highlight-current-row
                :default-sort="{ prop: 'date', order: 'descending' }"
                :empty-text="loadingDataMsg"
            >
                <el-table-column
                    label="序号"
                    align="center"
                    fixed
                    type="index"
                    width="70"
                    :index="indexMethod"
                >
                </el-table-column>
                <el-table-column
                    label="省编号"
                    prop="province_code"
                    sortable
                    align="center"
                    min-width="200"
                >
                </el-table-column>
                <el-table-column
                    label="省名称"
                    prop="province_name"
                    sortable
                    align="center"
                    min-width="200"
                >
                </el-table-column>
                <el-table-column
                    prop="create_time"
                    label="新增时间"
                    align="center"
                    width="170"
                    sortable
                    show-overflow-tooltip
                >
                    <template v-slot="scope">
                        {{
                            scope.row.create_time
                                ? proxy
                                      .$moment(scope.row.create_time * 1000)
                                      .format("YYYY-MM-DD HH:mm:ss")
                                : "-"
                        }}
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="90"
                    align="center"
                >
                    <template v-slot="scope">
                        <el-button size="small" type="primary" plain>
                            编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页-->
        <div class="textC mgT10" v-if="total > 0">
            <el-pagination
                background
                size="small"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 30, 50, 70, 100]"
                :page-size="pageNum"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {
    ref,
    reactive,
    onMounted,
    onUnmounted,
    watch,
    getCurrentInstance,
} from "vue";

import { ElMessage } from "element-plus";

import sso from "@/store/api/sso";

const { proxy } = getCurrentInstance() as any;

const pcHeight = ref(document.body.clientHeight - 90 + "px");
const pcHeight2 = ref(document.body.clientHeight - 160);
const dataLoading = ref(true);
const loadingDataMsg = ref("数据加载中...");
const total = ref(0);
const currentPage = ref(1); //当前第几页
const pageNum = ref(process.env.pageNum || 30); //每页条数
const tableData = ref([]);
const searchForm = reactive({
    searchVal: "",
});

onMounted(() => {
    getDataList();
});

const indexMethod = (index: number) => {
    return (currentPage.value - 1) * pageNum.value + index + 1;
};

const submitSearch = () => {
    loadingDataMsg.value = "数据加载中...";
    total.value = 0;
    currentPage.value = 1;
    tableData.value = [];
    getDataList();
};

const getDataList = async () => {
    dataLoading.value = true;
    loadingDataMsg.value = "数据加载中...";
    const obj = {
        searchForm: JSON.stringify(searchForm),
        page: currentPage.value,
        pageNum: pageNum.value,
    };
    const tmpResult: any = await sso.apiRegion(obj);
    if (tmpResult.code === 1) {
        total.value = tmpResult.data.count;
        tableData.value = tmpResult.data.count ? tmpResult.data.list : [];
    } else {
        ElMessage({
            type: "error",
            message: tmpResult.msg,
        });
        return false;
    }
    loadingDataMsg.value = total.value > 0 ? "" : "没有数据";
    dataLoading.value = false;
};

const handleSizeChange = (val: any) => {
    loadingDataMsg.value = "数据加载中...";
    total.value = 0;
    currentPage.value = 1;
    tableData.value = [];
    pageNum.value = val;
    getDataList();
};

const handleCurrentChange = (val: any) => {
    loadingDataMsg.value = "数据加载中...";
    total.value = 0;
    currentPage.value = val;
    tableData.value = [];
    getDataList();
};

onUnmounted(() => {});
</script>
